<!--人资 -->
<template>
    <AllOut>
        <div class="renzi" v-loading="loading">
            <TopNav :show_links="true"></TopNav>
            <div class="navHader">
                <Nav :nav_value="2"></Nav>
            </div>
            <div class="content_out index_content" style="padding-top:140px;">
                <b-container fluid>
                    <div class="flex aic" style="margin: 26px 0px;">
                        <el-select clearable  v-model="ruleFrom.positionType" placeholder="请选择" @change="blurClick">
                            <el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
                                :value="item.dictValue" >
                            </el-option>
                        </el-select>
                        <el-input style="width:650px;margin-left: 250px;" placeholder="搜索职位名称" @click="onSearch" v-model="ruleFrom.positionName" class="input-with-select">
                            <el-button  style="color: #FFFFFF;border: 0px;border-radius: 0px;" type="primary" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <!-- Content here -->
                    <div class="myxintou" v-if="ruleFrom.positionType == 1">
                        <p class="myxintou_titile fontw700 fonts24 fontz">{{ conpanyName.configurationValue }}</p>
                        <p class="myxintou_content fonts18 fontz">
                            {{ conpanyText.configurationValue }}
                        </p>
                    </div>
                    <b-row>
                        <b-col md="12" sm="12" class="">
                            <Classification style="margin-bottom: 10px;" @ClassificationClick="ClassificationClick" />
                            <ClassAll style="margin-bottom: 10px;" @ClassAllClick="ClassAllClick" />
                        </b-col>
                        <b-col md="12" sm="12" class="">
                            <Information v-for="(item, index) in rows" :key="index" :data="item" :indexValue="1" @collectionClick="collectionClick"/>
                        </b-col>
                        <el-empty
                            style="width: calc(100% - 26px);height: 500px; background: #f8f9fa;border: 1px solid #CACFD6;margin: auto;"
                            description="暂无数据" v-if="rows.length == 0" />
                    </b-row>
                    <div class="flex jcc aic" style="margin: 50px 0px;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="ruleFrom.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="ruleFrom.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </b-container>
            </div>
        </div>
    </AllOut>
</template>

<script>
import { homeConfiguration, positionList } from "@/api/index"
import { getInfo} from "@/api/login";
import { collections } from "@/api/my.js"
import { dictSect } from "@/utils/dictUnit"
export default {
    async asyncData() {
        const homeData = await homeConfiguration()
        return { homeData }
    },
    data() {
        return {
            homeData: {},
            inputValue: "",
            currentPage4: 4,
            conpanyName: {},
            conpanyText: {},
            ruleFrom: {
                pageNum: 1,
                pageSize: 10,
                positionType: "",
                positionName: "",
                positionClassify: "",//职位分类
                educationRequirements: "",//学历
                requirementsYears: "",//工作经验
                arrivalTime: "",//到岗时间
                urgentPosition: "0",
                salaryStart:"",
                salaryEnd:""
            },
            options: [],
            loading: false,
            total: 0,
            rows: []
        }
    },
    created() { },
    mounted() {
        console.log("首页配置：", this.homeData);
        this.info()
        this.options = dictSect("position_type")
        console.log(this.options);
        this.positionListApi(this.ruleFrom)
    },
    methods: {
        onSearch() {
            this.ruleFrom.pageNum = 1
            this.positionListApi(this.ruleFrom)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.ruleFrom.pageSize = val
            this.positionListApi(this.ruleFrom)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.ruleFrom.pageNum = val
            this.positionListApi(this.ruleFrom)
        },
        info() {
            this.conpanyName = this.homeData.data[0]
            this.conpanyText = this.homeData.data[1]
        },
        ClassificationClick(value) {
            console.log(value);
            this.ruleFrom.positionClassify = value.positionClassify
            this.ruleFrom.educationRequirements = value.educationRequirements
            this.ruleFrom.requirementsYears = value.requirementsYears
            this.ruleFrom.arrivalTime = value.arrivalTime
            this.ruleFrom.salaryStart=value.salaryStart
            this.ruleFrom.salaryEnd=value.salaryEnd
            this.positionListApi(this.ruleFrom)
        },
        ClassAllClick(value) {
            this.ruleFrom.urgentPosition = value.urgentPosition
            this.positionListApi(this.ruleFrom)
        },
        async positionListApi(params) {
            this.loading = true
            await positionList(params).then(res => {
                this.loading = false
                console.log(res);
                this.total = res.total
                this.rows = res.rows
            })
        },
        blurClick() {
            console.log("公司类别", this.ruleFrom.positionType);
            this.positionListApi(this.ruleFrom)
        },
         // ----------------------------------------------------//收藏职位-----------------------------------------------
         collectionClick(value){
            this.collectionApi(value)
        },
        collectionApi(id) { 
            collections({positionId: id}).then(res => {
                this.$message({
                    message: `${res.msg}`,
                    type: 'success',
                });
                this.getInfo_()
                this.positionListApi(this.ruleFrom)
            }).catch(res => {
                this.$message({
                    message: `${res.msg}`,
                    type: 'error',
                });
            })
        },
        getInfo_() {
            getInfo().then(res => {
                console.log("个人信息", res);
                sessionStorage.setItem("myInfornation", JSON.stringify(res.data))
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.rencai_search {
    display: flex;
    justify-self: center;
    margin: 43px 0px 28px 0px;
    width: 350px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    overflow: hidden;
    margin-right: 100px;
}

.renzi {
    // padding-top: 200px;
    position: relative;

    .navHader {
        position: absolute;
        width: calc(100% + 10px);
        padding: 0 160px;
        top: 140px;
        left: -5px;
        z-index: 999;
    }

}

.myxintou {
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    padding: 25px 30px;
    margin-bottom: 16px;

    .myxintou_titile {
        margin-bottom: 19px;
    }

    .myxintou_content {}
}

.renzi_search {
    display: flex;
    justify-self: center;
    margin: 43px 0px 28px 0px;
    width: 700px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    overflow: hidden;
}
</style>